<template>
	<view>
		<view v-for="(item,index) in truck_list" :key="item.transferid" class="truck_item"
			@click="onScanLoad(item,'1')">
			<view class="div_item">
				<view>发往<span>{{item.addrto || '--'}}</span></view>
				<view>卸货点 <span>{{item.addrxhd || '--'}}</span></view>
			</view>
			<view class="div_item">
				<view>车牌号<span>{{item.vehicleno || '--'}}</span></view>
				<view>装车单号<span>{{item.loadno || '--'}}</span></view>
			</view>
			<view class="div_item">
				<view>驾驶员<span>{{item.drivername || '--'}}</span></view>
				<view>电话<span>{{item.drivertel || '--'}}</span></view>
			</view>
			<view class="div_item">
				<view>运单数<span>{{item.detailModel.length}}</span></view>
				<!-- <view>电话<span>--</span></view> -->
			</view>

			<!-- 底部操作菜单 -->
			<view class="op_menu_div">
				<!-- <view class="btn_share" @click.stop="onShare(item)">分享</view> -->
				<!-- <view class="btn_share" @click.stop="onShowQrCode(item)">收款码</view> -->
				<!-- <view class="btn_share" @click.stop="onContract(item)">上传协议</view> -->
				<!-- <view class="btn_share" @click.stop="onSend(item)">发车</view> -->
				<!-- <view class="btn_share" @click.stop="onScanLoad(item,'2')">装车</view> -->
			</view>

		</view>

		<view v-if="!truck_list || truck_list.length <= 0"
			style="width: 100vw;height: 80vh;text-align: center;margin: 38vh 0 0 0;">
			暂无数据~
		</view>

		<!-- 测试二维码收款弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
				<view class="pop_div">
					<view class="pop_div_1">
						支 付 运 费
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
					</view>

					<view class="pop_div_2">
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">付款后请耐心等待支付结果..</view>
							<view class="btn_refresh_qrcode" @click="onRefreshQrCode">刷新收款码</view>
						</view>
						<view>
							<image class="img_qrcode" mode="aspectFit" :src="qrdata"></image>
						</view>
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">等待支付..</view>
							<view class="btn_refresh_qrcode" @click="onRefreshState">刷新状态</view>
						</view>
					</view>

					<view class="pop_div_3">
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
						<view @click="onClosePop">关闭</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { tsToDateAndTime, tsToDateFormat } from '@/utils/util.js'
	export default {
		data() {
			return {
				truck_list: [], // 车次列表
				curr_truck: {}, // 记录当前操作的车次
				qrdata: '', // 收款二维码
			}
		},

		methods: {

			onSend(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '点击『确定』将进入发车页面。发车操作如出现异常，请及时联系相关人员进行处理！',
					success: res => {
						if (res.confirm) {
							uni.navigateTo({ url: `/pages/i2/send/send?truck=${JSON.stringify(item)}` })
						} else if (res.cancel) {
							console.log('发车按钮,用户点击取消');
						}
					}
				})
			},

			onScanLoad(item, type) {
				uni.navigateTo({ url: `/pages/i2/truck_detail/truck_detail?truck=${JSON.stringify(item)}&type=${type}` })
			},

			onContract(item) {
				let that = this
				this.curr_truck = item

				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url: 'https://vms.shunhewulian.com/api/common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: { 'upload': 'uploadFormData' },
							complete: uploadFileRes => {
								console.log(uploadFileRes);
								let { code, msg, data } = JSON.parse(uploadFileRes.data)
								if (msg == 1 && data && data.fullurl) {
									that.uploadAgreement(item.id, agreement_img)
								}
							},

						});
					}
				});

			},

			onShowQrCode(item) {
				this.curr_truck = item

				this.getCcbQrcode()

				// 测试生成建行收款二维码 $genCCBQrCode
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},

			onClosePop() {
				this.$refs.popup.close()
			},

			onRefreshQrCode() {
				// this.$toast('刷新收款码开发中')
				this.getCcbQrcode()
			},

			onRefreshState() {
				this.$toast('刷新状态开发中')
			},

			onShare(item) {
				console.log('分享收到的数据 = ', item);
				let cardata = {
					start_outlet_id: '',
					start_name: item.addrfromnode,
					end_outlet_id: item.xhd,
					end_name: item.addrto,
					mid: item.xhd,
					muzzle_name: item.addrxhd,
					line_id: item.transferid
				}
				uni.navigateTo({ url: `/pages/share/share?cardata=${JSON.stringify(cardata)}&truck=${JSON.stringify(item)}` })
			},

			async getCcbQrcode() {
				let that = this
				let uinfo = this.$getUserInfo()
				let res = await this.$genCCBQrCode({
					// memberid: uinfo.company_tms_id,
					memberid: '200017',
					// waybillid: that.curr_truck.detailModel[0].docid,
					// waybillno: that.curr_truck.detailModel[0].docno,
					waybillid: new Date().getTime(),
					waybillno: 'PDA' + tsToDateAndTime(new Date(), '', '', ''),
					freight: that.curr_truck.detailModel[0].freight,
					dskamount: '0.01',
					dataSource: 1, // 1 电脑 3 开票机 4 手持设备
					datamodule: 1, // 1 开单 2 出库
					datatype: 'CCB', // CCB 建设银行
					imagetype: 'base64', // base64 返回ase64二维码图形，其他 返回 Url
				})
				console.log('getCcbQrcode.res =', res);
				this.qrdata = res.qrdata
			},

			async getTruckList() {
				let uinfo = this.$getUserInfo()
				// memberid: '200017',
				// accountid: '7789925a89204c38a0c1f9e73cbdc293',
				let res = await this.$truck_list({
					memberid: uinfo.company_tms_id,
					accountid: uinfo.user_tms_id,
					transferstatus: '3',
					transferid: '',
				})
				console.log('getTruckList.res =', res);
				this.truck_list = res.data
				this.truck_list = this.truck_list.reverse()
			},

			// 接口:上传协议 $uploadAgreement
			async uploadAgreement(id, agreement_img) {
				let res = await this.$uploadAgreement({ id, agreement_img })
				if (res.code == 1) {
					this.$toast('上传成功')
				} else {
					this.$toast(msg || '数据异常')
				}
			},

		},

		mounted() {
			let that = this
			this.getTruckList()

			// 事件总线:创建车次成功
			uni.$on('onCreateTruck', data => {
				that.getTruckList()
			})

			// 事件总线:确认装车成功
			uni.$on('onLoadSuccess', data => {
				console.log('监听到事件来自装车页面,携带参数 data =', data);
				that.getTruckList()
			})

			// 事件总线:发车成功
			uni.$on('onSendSuccess', data => {
				console.log('监听到事件来自发车页面,携带参数 data =', data);
				that.getTruckList()
			})

			// setTimeout(() => {
			// 	uni.startPullDownRefresh()
			// }, 3000)

		},

		onPullDownRefresh() {
			console.log('车次列表出发下拉刷新...');
			this.getTruckList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 3000)
		},

	}
</script>

<style scoped>
	.truck_item {
		margin: 20rpx;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
	}

	.div_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}

	span {
		/* display: block; */
		margin: 0 0 0 10rpx;
		color: #1890FF;
		font-size: 26rpx;
	}

	.op_menu_div {
		display: flex;
		justify-content: flex-end;
		padding: 14rpx;
	}

	.btn_share {
		background-color: #1890FF;
		width: 118rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		color: white;
		border-radius: 4rpx;
		margin: 0 0 0 12rpx;
	}

	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 75vw;
		height: 66vh;
		background-color: white;
		border-radius: 20rpx;
	}

	.pop_div_1 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 22rpx;
		color: rgba(0, 0, 0, 0.35);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}

	.pop_div_3 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}
</style>